<template>
<div class="row">
	<div class="canvas col-2">
	<el-row :gutter="20">
     <el-col :span="12"> <img id="one" draggable="true" src="http://www.w3school.com.cn/i/ct_html5_canvas_circle.gif" ></el-col>
    <el-col :span="12"><img id="two" draggable="true" src="../img/2.png" alt="" ></el-col>
   </el-row>
    </div>
	<div class="canvas col-5">
	 <canvas  id="myCanvas" width="1000" height="1000" >
         <p>您的系统不支持此程序!</p>
     </canvas>
	</div>
	<div class="canvas col-3">
	   属性div
	</div>
</div>
</template>
<script>
	let img1 = new Image();
let canva;
let cansText;
let box;
let drop;
export default {
  name: "clone",
  display: "Clone",
  order: 2,
  mounted() {
    this.initCanvas()
  },
  components: {
  },
  data() {
    return {
    };
  },
  methods: {
   initCanvas() {
      console.log("初始化canvas")
      canva=document.getElementById("myCanvas");
      cansText= canva.getContext('2d');
      box = document.getElementsByClassName('row')[0];
      drop = document.getElementById('myCanvas');
      box.ondragstart=this.dragstart;
	  drop.ondragenter=this.dragenter;
	  box.ondrag = this.drag;
	  box.ondragend= this.dragend;
	  drop.ondragover= this.dragover;
	  drop.ondragleave= this.dragleave;
	  drop.ondrop= this.drop;
    },
    dragstart(e) {
        console.log('dragstart');
        e.dataTransfer.setData('id',e.target.id);
		var dragobj = document.getElementById(e.target.id);
		e.dataTransfer.setData('offsetx',e.x-this.getLeft(dragobj));
		e.dataTransfer.setData('offsety',e.y-this.getTop(dragobj));
    }, 
     drag(e) {
        console.log('drag',e.target.id);
    },
     dragend(e) {
        console.log('dragend'+e)
    },
     dragenter (e) {
        console.log('dragenter');
        e.preventDefault();
    },
     dragover(e) {
        console.log('dragover');
        e.preventDefault();
        drop.innerHTML = '';
    },
     dragleave(e) {
        console.log('dragleave');
        e.preventDefault();
    },
     drop(e) {
        console.log('drop');
		console.log('scrolltop:'+document.documentElement.scrollTop);
		
		
        var imgId = e.dataTransfer.getData('id');
		var offsetX = e.dataTransfer.getData('offsetx');
		var offsetY = e.dataTransfer.getData('offsety');
		debugger;
		if(document.getElementById(imgId)!=null){
		img1.src=document.getElementById(imgId).src;
		
		//var x = e.clientX - canva.offsetLeft;
		//var y = e.clientY - canva.offsetTop;
		var x = e.clientX - offsetX ;
		var y = e.clientY - offsetY;
		var rect = canva.getBoundingClientRect();
		//var getBoundingClientRectTop = canva.getBoundingClientRect().top;
		//var getBoundingClientRectLeft = canva.getBoundingClientRect().left;
		var getBoundingClientRectTop = rect.top * (canva.height / rect.height);
		var getBoundingClientRectLeft = rect.left * (canva.width / rect.width)
		var realy = y - getBoundingClientRectTop-document.documentElement.scrollTop;
		var realx = x - getBoundingClientRectLeft-document.documentElement.scrollLeft;
		console.log('x='+realx+',y='+realy);
		cansText.drawImage(img1,realx,realy,document.getElementById(imgId).width,document.getElementById(imgId).height);
		}else{
		  //文本处理
		  var text = e.dataTransfer.getData('text/plain');
		  console.log('drag text:'+text);
		}
        e.preventDefault();
		e.stopPropagation();
	},
   getTop(e) {
		var offset = e.offsetTop;
		if (e.offsetParent != null) offset += this.getTop(e.offsetParent);
		return offset;
  },
 getLeft(e) {
	if(e!=null){
	 var offset = e.offsetLeft;
	 if (e.offsetParent != null) offset += this.getLeft(e.offsetParent);
	 return offset;
	}
  }
}
}
</script>
<style>
    img {
        width: 100px;
        height: 100px;
        display: inline-block;
		flex-shrink: 0;
    }
    .drop {
        width: 100px;
        height: 100px;
        border: 1px solid #000;
    }
	.row {
  display: flex;
  padding:0px;
margin:0px;
position:absolute;
left:0px;
width:100%;
height:100%;
}
.col-2 {
  flex: 0 0 20%;
  max-width: 20%;
}
.col-5 {
  flex: 0 0 60%;
  max-width: 60%;
}
.col-3 {
  flex: 0 0 20%;
  max-width: 20%;
  margin-right: 0; 
}
  .canvas{
  border: 1px solid #000
  }
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }  
</style>